<template>
  <div class="submit-container py-5">
    <div class="mx-auto px-4 max-w-11xl sm:px-6 lg:px-4">
      <div class="flex flex-shrink-0 items-center justify-between gap-3 flex-wrap">
        <h1 class="text-4xl text-gray-1000 font-semibold flex-shrink-0">
          {{$t('submit_yourAIsOnToolify')}}
        </h1>
        <common-link path="/user"
          class="w-full sm:w-auto flex flex-shrink-0 items-center justify-between gap-4 border border-gray-1300 pl-3 pr-2 py-2.5 text-sm text-gray-1000 rounded hover:text-purple-1300 hover:border-purple-1300">
          <span>
            {{$t('submit_myOrders')}}
          </span>
          <svg-icon iconName="arrow_right"
            :isDiv="true"
            class="w-4 h-4 flex-shrink-0 mt-0.5" />
        </common-link>
      </div>
      <p class="text-base text-gray-1000 mt-3">
        {{$t('submit_toolifyAiCanHelp')}}
      </p>
      <div class="mt-7 grid xs:grid-cols-2 md:flex items-stretch gap-x-6 gap-y-6 lg:justify-between flex-wrap">
        <div class="flex items-center gap-3 flex-shrink-0">
          <svg-icon className="w-10 h-10 flex-shrink-0"
            :isDiv="true"
            iconName='pageviews'></svg-icon>
          <div class="flex-1">
            <div class="text-28 text-gray-1000 font-semibold">{{$t('submit_topNum01')}}</div>
            <p class="text-base text-gray-1000 leading-5 mt-1">{{$t('submit_pageViews')}}</p>
          </div>
        </div>
        <div class="flex items-center gap-3 flex-shrink-0">
          <svg-icon className="w-10 h-10 flex-shrink-0"
            :isDiv="true"
            iconName='users'></svg-icon>
          <div class="flex-1">
            <div class="text-28 text-gray-1000 font-semibold">{{$t('submit_topNum02')}}</div>
            <p class="text-base text-gray-1000 leading-5 mt-1">{{$t('submit_monthlyActiveUsers')}}</p>
          </div>
        </div>
        <div class="flex items-center gap-3 flex-shrink-0">
          <svg-icon className="w-10 h-10 flex-shrink-0"
            :isDiv="true"
            iconName='traffic'></svg-icon>
          <div class="flex-1">
            <div class="text-28 text-gray-1000 font-semibold">{{$t('submit_topNum03')}}</div>
            <p class="text-base text-gray-1000 leading-5 mt-1">{{$t('submit_exportAiTraffic')}}</p>
          </div>
        </div>
        <div class="flex items-center gap-3 flex-shrink-0">
          <svg-icon className="w-10 h-10 flex-shrink-0"
            :isDiv="true"
            iconName='users'></svg-icon>
          <div class="flex-1">
            <div class="text-28 text-gray-1000 font-semibold">{{$t('submit_topNum04')}}</div>
            <p class="text-base text-gray-1000 leading-5 mt-1">{{$t('submit_desktopUsers')}}</p>
          </div>
        </div>
        <div class="flex items-center gap-3 flex-shrink-0">
          <svg-icon className="w-10 h-10 flex-shrink-0"
            :isDiv="true"
            iconName='traffic'></svg-icon>
          <div class="flex-1">
            <div class="text-28 text-gray-1000 font-semibold">{{$t('submit_topNum05')}}</div>
            <p class="text-base text-gray-1000 leading-5 mt-1">{{$t('submit_avgTimeOnSite')}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-gray-2600 mt-7 py-3">
      <div class="mx-auto px-4 max-w-11xl sm:px-6 lg:px-4">
        <div class="grid xs:grid-cols-2 md:flex items-stretch gap-x-6 gap-y-6 lg:justify-between flex-wrap">
          <div class="flex items-center gap-2 flex-shrink-0">
            <svg-icon className="w-4.5 h-4.5 flex-shrink-0"
              :isDiv="true"
              iconName='check_2'></svg-icon>
            <p class="flex-1 text-base text-gray-1000 leading-5">{{$t('submit_topAiToolsDirectory')}}</p>
          </div>
          <div class="flex items-center gap-2 flex-shrink-0">
            <svg-icon className="w-4.5 h-4.5 flex-shrink-0"
              :isDiv="true"
              iconName='check_2'></svg-icon>
            <p class="flex-1 text-base text-gray-1000 leading-5">{{$t('submit_dofollowBacklink')}}</p>
          </div>
          <div class="flex items-center gap-2 flex-shrink-0">
            <svg-icon className="w-4.5 h-4.5 flex-shrink-0"
              :isDiv="true"
              iconName='check_2'></svg-icon>
            <p class="flex-1 text-base text-gray-1000 leading-5">{{$t('submit_multiLanguageIntro')}}</p>
          </div>
          <div class="flex items-center gap-2 flex-shrink-0">
            <svg-icon className="w-4.5 h-4.5 flex-shrink-0"
              :isDiv="true"
              iconName='check_2'></svg-icon>
            <p class="flex-1 text-base text-gray-1000 leading-5">{{$t('submit_listingTrafficForever')}}</p>
          </div>
          <div class="flex items-center gap-2 flex-shrink-0">
            <svg-icon className="w-4.5 h-4.5 flex-shrink-0"
              :isDiv="true"
              iconName='check_2'></svg-icon>
            <p class="flex-1 text-base text-gray-1000 leading-5">{{$t('submit_valueForFoundersStartups')}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-gray-2700 py-3.5">
      <div class="mx-auto px-4 max-w-11xl sm:px-6 lg:px-4">
        <p class="text-base text-white leading-5">{{$t('submit_chooseWhatYouWant')}}</p>
      </div>
    </div>
    <div class="mx-auto px-4 max-w-11xl sm:px-6 lg:px-4 mt-4">
      <div class="flex items-stretch justify-center gap-3.5 flex-wrap">
        <common-link path="/submit"
          class="w-full sm:w-auto sm:min-w-44 flex-1 border rounded-lg py-5 px-4 block flex-shrink-0"
          :class="{'bg-purple-1300 border-purple-1300 text-white hover:opacity-90': currentPage === 'submit', 'border-gray-1600 hover:border-purple-1300 hover:text-purple-1300 group ': currentPage !== 'submit'}">

          <h3 class="text-xl leading-6 font-semibold ">{{$t('submit_submitAi')}}</h3>
          <p class="text-sm leading-5 mt-2.5 break-words">{{$t('submit_submitYourAiTools')}}</p>
        </common-link>
        <common-link path="/advertise"
          class="w-full sm:w-auto sm:min-w-44 flex-1 border rounded-lg py-5 px-4 block flex-shrink-0"
          :class="{'bg-purple-1300 border-purple-1300 text-white hover:opacity-90': currentPage === 'advertise', 'border-gray-1600 hover:border-purple-1300 hover:text-purple-1300 group ': currentPage !== 'advertise'}">
          <h3 class="flex items-center gap-2">
            <span class="text-xl leading-6 font-semibold">{{$t('submit_advertise')}}</span>
            <svg-icon className="text-lg mr-1 -mt-0.5"
              :class="{'text-white': currentPage === 'advertise', 'text-purple-1300': currentPage !== 'advertise'}"
              :isDiv="true"
              iconName='promote'></svg-icon>
          </h3>
          <p class="text-sm leading-5 mt-2.5 break-words">{{$t('submit_payPerClick')}}</p>
        </common-link>
        <common-link path="/update-ai"
          class="w-full sm:w-auto sm:min-w-44 flex-1 border rounded-lg py-5 px-4 block flex-shrink-0"
          :class="{'bg-purple-1300 border-purple-1300 text-white hover:opacity-90': currentPage === 'update-ai', 'border-gray-1600 hover:border-purple-1300 hover:text-purple-1300 group ': currentPage !== 'update-ai'}">
          <h3 class="text-xl leading-6 font-semibold ">{{$t('submit_updateAI')}}</h3>
          <p class="text-sm leading-5 mt-2.5 break-words">{{$t('submit_supportUpdate')}}</p>
        </common-link>
        <common-link path="/submit-gpt"
          class="w-full sm:w-auto sm:min-w-44 flex-1 border rounded-lg py-5 px-4 block flex-shrink-0"
          :class="{'bg-purple-1300 border-purple-1300 text-white hover:opacity-90': currentPage === 'submit-gpt', 'border-gray-1600 hover:border-purple-1300 hover:text-purple-1300 group ': currentPage !== 'submit-gpt'}">
          <h3 class="text-xl leading-6 font-semibold ">{{$t('submit_submitGPT')}}</h3>
          <p class="text-sm leading-5 mt-2.5 break-words">{{$t('submit_submitYourGPTs')}}</p>
        </common-link>
        <common-link path="/business"
          class="w-full sm:w-auto sm:min-w-44 flex-1 border rounded-lg py-5 px-4 block flex-shrink-0"
          :class="{'bg-purple-1300 border-purple-1300 text-white hover:opacity-90': currentPage === 'business', 'border-gray-1600 hover:border-purple-1300 hover:text-purple-1300 group ': currentPage !== 'business'}">
          <h3 class="text-xl leading-6 font-semibold ">{{$t('submit_moreBusiness')}}</h3>
          <p class="text-sm leading-5 mt-2.5 break-words">{{$t('submit_suchAs')}}</p>
        </common-link>
      </div>

      <submit-a-tool v-if="currentPage === 'submit'"></submit-a-tool>
      <submit-advertise v-if="currentPage === 'advertise'"></submit-advertise>
      <submit-update-ai v-if="currentPage === 'update-ai'"></submit-update-ai>
      <submit-gpt v-if="currentPage === 'submit-gpt'"></submit-gpt>
      <submit-business v-if="currentPage === 'business'"></submit-business>

      <submit-faq class="mt-20 sm:mt-32"></submit-faq>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SubmitPage',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.description,
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.description,
        },
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
    }
  },
  async asyncData({ app, route, params, query, $axiosApi, store }) {
    let pageDesc = app.$cookies.get('pageDesc')
    try {
      let [langRes] = await Promise.all([await $axiosApi.getLanguagesMul()])

      let description
      let curLocale = store.state.locale
      if (
        langRes.code === 200 &&
        langRes.data &&
        langRes.data.languages &&
        langRes.data.languages.description &&
        langRes.data.languages.description.length > 0 &&
        langRes.data.languages.description[0].content &&
        (langRes.data.languages.description[0].content[curLocale] ||
          langRes.data.languages.description[0].content.default)
      ) {
        if (langRes.data.languages.description[0].content[curLocale]) {
          description = langRes.data.languages.description[0].content[curLocale]
        } else {
          description = langRes.data.languages.description[0].content.default
        }

        app.$cookies.set('pageDesc', description, {
          maxAge: 60 * 60 * 24 * 7,
          path: '/',
        })
      } else if (pageDesc) {
        description = pageDesc
      }
      const currentPage = route.name.replace('lang-', '')
      return {
        description,
        currentPage,
      }
    } catch (err) {
      console.log(err)
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
      toolify_isLogin: (state) => state.toolify_isLogin,
    }),
  },
  created() {
    this.currentPage = this.$route.name.replace('lang-', '')
  },
  data() {
    return {
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,

      description: null,

      currentPage: 'submit',
    }
  },
  methods: {},
}
</script>

<style lang='scss' scoped>
.submit-container {
  ::v-deep .form {
    max-width: 600px;
    .el-form-item__label {
      font-weight: 600;
      line-height: 16px;
      margin-bottom: 12px;
      width: 100%;
      text-align: left;
    }
    .el-form-item__error {
      font-size: 14px;
    }

    .el-checkbox-group {
      width: 100%;
      .categories-group {
        h4 {
          font-size: 14px;
          color: #606266;
          font-weight: 600;
        }
        .checkbox-list {
          line-height: 28px;
        }
      }
    }
    .el-loading-spinner {
      display: flex;
      justify-content: center;
    }
  }
  .no-color {
    color: rgba(0, 0, 0, 0);
  }
}
</style>

